<template>
	<view class="user">
		<view class="user-box">
			<view>
				<view @click="toPage('doctorInfo')">医生</view>
			</view>
			<view>
				<view @click="toPage('registration')">挂号</view>
			</view>
			<view>
				<view @click="toPage('case')">病例</view>
			</view>
			<view>
				<view @click="toPage('userInfo')">个人</view>
			</view>
			<view>
				<view @click="toEvaluate">宝贵建议</view>
			</view>
			<view>
				<view @click="exit">退出登录</view>
			</view>
		</view>


		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="通知" content="请先完善个人信息"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="exitDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="提示" content="确认退出？"
				@confirm="exitDialogClose" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentUser: this.$store.state.currentUser
			};
		},
		methods: {
			toPage(page) {
				if (this.currentUser.name == undefined && page != 'userInfo') {
					this.$refs.alertDialog.open()
					return
				}

				uni.navigateTo({
					url: `/pages/user/${page}/index`
				})
			},
			dialogConfirm() {
				uni.navigateTo({
					url: "/pages/user/userInfo/index"
				})
			},
			dialogClose() {

			},
			exit() {
				this.$refs.exitDialog.open()
			},
			exitDialogClose() {
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},
			toEvaluate() {
				uni.navigateTo({
					url: "/pages/evaluate/index"
				})
			}
		},
		mounted() {
			console.log(this.$store.state)

			if (this.currentUser.name == undefined) {
				this.$refs.alertDialog.open()
			}

		}
	}
</script>

<style lang="scss">
	.user-box {
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;
		padding: 50rpx 0;
		opacity: 0.8;
		background: linear-gradient(white, transparent);

		&>view {
			width: 25%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 20rpx;
			flex-shrink: 0;
			margin-bottom: 20rpx;

			view {
				width: 160rpx;
				margin: 0 auto;
				background-color: skyblue;
				border-radius: 20rpx;
			}
		}
	}
</style>
